{% extends "center/base.html" %}
{% block title %}DSS平台{% endblock %}
{% block urlName %}list{% endblock %}
{% block section_name %}报表{% endblock %}
{% block main %}

  <p align="center" class="mr1"><label >日期范围：</label>
      <input type="text" value="{{ day_s }}" id="start_date" class="date">至
      <input type="text" value="{{ day }}" id="end_date" class="date"><a href="javascript:search({{ id }});">查询</a>
      <input type="hidden" value="{{ id }}" id="cur_id">
  </p>

<div id="chartarea"></div>
{% endblock %}
{% block headarea %}
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"  />
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script src="{% url static %}highcharts/highcharts.js" type="text/javascript"></script>
    <style>
    .date{width:90px;}
    .mr1{margin-top: 5px;}
    </style>
    <script>
    function search(id){
        var host = window.location.host;
        var path = window.location.pathname;
        var s = $("#start_date").val();
        var e = $("#end_date").val();
        var url = 'http://'+host+path+'?id='+id;
        url+='&s_date='+s+'&e_date='+e
        window.location.href =url;
    }
    </script>
{% endblock %}
{% block readyfunction %}
       chart = new Highcharts.Chart({
         chart: {
            renderTo: 'chartarea',
            type: 'spline'
         },
         title: {
            text: '龙泉旗舰店报表'
         },
         xAxis: {
          categories: [
                   {% for item in cate %}
                        '{{ item}}',
                   {% endfor %}
           ]
         },
         yAxis: {
            title: {
               text: '龙泉旗舰店销售报表'
            }
         },
         series: [
             {
                name: '30天销量',
                data: [
                        {% for item in sale_num %}
                        {{ item }},
                        {% endfor %}
                ]
            },
             {
                name: '30天销售额',
                data: [
                        {% for item in sale_money %}
                        {{ item }},
                        {% endfor %}
                ]
            }
         ]
      });
     initdatepicker_cn();
      $( ".date" ).datepicker(
                {
                    inline: true,
                    dateFormat: 'yy-mm-dd',
                    showMonthAfterYear: true, // 月在年之后显示
                    changeMonth: true ,   // 允许选择月份
                    changeYear: true   // 允许选择年份
                }
        );

    //日期控件中文汉化
function initdatepicker_cn()
{
    $.datepicker.regional['zh-CN'] = {
        clearText: '清除',
        clearStatus: '清除已选日期',
        closeText: '关闭',
        closeStatus: '不改变当前选择',
        prevText: '<上月',
        prevStatus: '显示上月',
        prevBigText: '<<',
        prevBigStatus: '显示上一年',
        nextText: '下月>',
        nextStatus: '显示下月',
        nextBigText: '>>',
        nextBigStatus: '显示下一年',
        currentText: '今天',
        currentStatus: '显示本月',
        monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
        monthStatus: '选择月份',
        yearStatus: '选择年份',
        weekHeader: '周',
        weekStatus: '年内周次',
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        dayStatus: '设置 DD 为一周起始',
        dateStatus: '选择 m月 d日,DD',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        initStatus: '请选择日期',
        isRTL: false};
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
}
{% endblock %}